<template>
  <div>
    <!-- 第一部分：图片和视频 -->
    <div class="home-first-section">
      <div class="home-container">
        <a-row :gutter="0">
          <!-- 左侧图片部分 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="media-col">
            <a :href="`/classify/${homeConfig.homeImageUrl}.html`" target="_self" class="left-image-container">
              <a-image
                  :src="homeConfig.homeImage"
                  :preview="false"
                  alt="Home Image"
                  class="home-image"
              />
            </a>
          </a-col>

          <!-- 右侧视频部分 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="media-col">
            <div class="right-video-container">
              <a aria-label="video-wrapper" :href="`/classify/${homeConfig.homeVideoUrl}.html`" target="_self"
                 class="video-wrapper">
                <video
                    ref="videoPlayer"
                    class="home-video"
                    :src="homeConfig.homeVideo"
                    autoplay
                    muted
                    loop
                    playsinline
                ></video>
              </a>
              <div class="video-controls">
                <a-button
                    class="pause-button"
                    shape="circle"
                    @click="togglePlay"
                >
                  <pause-outlined v-if="isPlaying"/>
                  <play-circle-outlined v-else/>
                </a-button>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 第二部分：Always In the Bag -->
    <div class="always-in-bag-section">
      <div class="section-container">
        <h2 class="section-title">Always In the Bag</h2>

        <div class="category-container">
          <!-- 分类列表 -->
          <div class="category-wrapper" ref="categoryWrapper">
            <div class="category-buttons" ref="categoryButtons">
              <a-button
                  v-for="(category, index) in categories"
                  :key="index"
                  class="category-btn"
                  :class="{ active: activeCategoryIndex === index }"
              >
                <a :href="`/classify/${category.url}-${category.category_id}.html`" :title="category.title"
                   target="_self">{{ category.title }}</a>
              </a-button>
            </div>
          </div>

          <!-- 滚动条 -->
          <div class="category-indicator">
            <div class="indicator-line" @mousedown="startDrag" ref="indicatorLine">
              <div class="active-indicator" ref="activeIndicator" :style="indicatorStyle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第三部分：图片组合 -->
    <div class="third-section">
      <div class="third-section-container">
        <a-row :gutter="0">
          <!-- 第一列：左侧图片 -->
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="third-img-col"
                 v-for="(item,index) in thirdSectionList" :key="index">
            <a :href="`/product/${item.url.url}.html`" class="img-link">
              <a-image
                  :src="item.image"
                  :preview="false"
                  :alt="item.title"
                  class="third-section-image"
              />
            </a>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 第四部分：In Pursuit Of -->
    <div class="fourth-section">
      <div class="fourth-section-container">
        <h2 class="section-title">In Pursuit Of</h2>

        <a-row :gutter="0">
          <!-- 第一个产品 -->
          <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" class="fourth-img-col" v-for="(item, index) in pursuitList"
                 :key="index">
            <div class="fourth-product-item">
              <a :href="`/featuredShops?id=${item.classify_id.split('-')[1]}`" class="img-link" v-if="item.title == 'Shades of the Season'">
                <a-image
                    :src="item.image"
                    :preview="false"
                    alt="Festival Shop"
                    class="fourth-section-image"
                />
              </a>
              <a :href="`/featuredClass?id=${item.classify_id.split('-')[1]}`" class="img-link" v-else-if="item.title == 'Outfitting'">
                <a-image
                    :src="item.image"
                    :preview="false"
                    alt="Festival Shop"
                    class="fourth-section-image"
                />
              </a>
              <a :href="`/classify/${item.url.url}-${item.classify_id.split('-')[1]}.html`" class="product-link" v-else>
                <a-image
                    :src="item.image"
                    :preview="false"
                    alt="Festival Shop"
                    class="fourth-section-image"
                />
              </a>
              <div class="product-title">{{ item.title }}</div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 第五部分：横向滚动商品展示 -->
    <div class="fifth-section">
      <div class="fifth-section-container">
        <div class="mobile-scroll-wrapper" ref="fifthSectionScroll">
          <div class="fifth-section-item" v-for="(item, index) in hotRecommendList" :key="item.id">
            <!-- 判断是否为视频 -->
            <div v-if="item.image.endsWith('.mp4')" class="fifth-video-container">
              <a :href="`/classify/${item.url.url}-${item.classify_id.split('-')[1]}.html`" class="img-link">
                <video
                    :ref="el => { if (el) fifthVideoPlayer = el }"
                    class="fifth-video"
                    :src="item.image"
                    muted
                    loop
                    playsinline
                ></video>

                <div class="overlay-text">
                  <div class="overlay-title">A Tailor-Made</div>
                  <div class="overlay-title">Shopping</div>
                  <div class="overlay-title">Experience</div>
                </div>
              </a>

              <div class="video-controls">
                <a-button
                    class="pause-button"
                    shape="circle"
                    @click="toggleFifthPlay"
                >
                  <pause-outlined v-if="isPlaying"/>
                  <play-circle-outlined v-else/>
                </a-button>
              </div>
            </div>

            <a v-else-if="item.title == 'LANNAN Services'" href="/sustainability" class="img-link">
              <a-image
                  :src="item.image"
                  :preview="false"
                  :alt="item.title"
                  class="fifth-section-image"
              />
            </a>

            <a v-else :href="`/classify/${item.url.url}-${item.classify_id.split('-')[1]}.html`" class="img-link">
              <a-image
                  :src="item.image"
                  :preview="false"
                  :alt="item.title"
                  class="fifth-section-image"
              />
            </a>
            <div class="product-title">{{ item.title }}</div>
          </div>
        </div>

        <!-- 指示器 - 仅在移动端显示 -->
        <div class="scroll-indicator-mobile">
          <div class="indicator-dots">
              <span
                  v-for="n in hotRecommendList.length"
                  :key="n"
                  class="dot"
                  :class="{ active: currentFifthSlide === (n-1) }"
              ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount, computed, reactive} from 'vue';
import {PauseOutlined, PlayCircleOutlined} from '@ant-design/icons-vue';
import {useSeo} from "@/views/Home/hooks/useSeo.hook.ts";
// 初始化SEO数据
const { seoData, pageData, initSeo } = useSeo();

const homeConfig = reactive({
  homeImage: '',
  homeImageUrl: '',
  homeVideo: '',
  homeVideoUrl: '',
});
const pursuitList = ref([]);
const thirdSectionList = ref([]);
const hotRecommendList = ref([]);
// 视频播放状态
const videoPlayer = ref(null);
const isPlaying = ref(true);
const fifthVideoPlayer = ref(null);

// 第五部分当前滑动位置
const fifthSectionScroll = ref(null);
const currentFifthSlide = ref(0);
// 播放/暂停切换
const togglePlay = () => {
  if (videoPlayer.value) {
    if (isPlaying.value) {
      videoPlayer.value.pause();
    } else {
      videoPlayer.value.play();
    }
    isPlaying.value = !isPlaying.value;
  }
};

const toggleFifthPlay = () => {
  if (fifthVideoPlayer.value) {
    if (isPlaying.value) {
      fifthVideoPlayer.value.pause();
    } else {
      fifthVideoPlayer.value.play();
    }
    isPlaying.value = !isPlaying.value;
  }
};

// 第二部分：分类按钮
const categories = ref([]);
const activeCategoryIndex = ref(0);
const categoryWrapper = ref(null);
const categoryButtons = ref(null);
const indicatorLine = ref(null);
const activeIndicator = ref(null);

// 设置激活的分类 - 移除滚动功能
const setActiveCategory = (index) => {
  activeCategoryIndex.value = index;
};

// 计算指示器样式
const indicatorStyle = computed(() => {
  const width = 100 / categories.value.length;
  return {
    width: `${width}%`,
    left: `${activeCategoryIndex.value * width}%`
  };
});

// 滚动条状态
const dragState = reactive({
  isDragging: false,
  startX: 0,
  scrollLeft: 0,
  maxScroll: 0,
  indicatorWidth: 0
});

// 初始化滚动指示器
const initializeScrollIndicator = () => {
  // 设置滚动条宽度和最大滚动距离
  if (categoryWrapper.value && categoryButtons.value && indicatorLine.value) {
    // 设置滚动容器的滚动行为
    categoryWrapper.value.addEventListener('scroll', updateIndicatorPosition);

    // 添加触摸事件支持
    indicatorLine.value.addEventListener('touchstart', handleTouchStart);
  }
};

// 更新指示器位置
const updateIndicatorPosition = () => {
  if (!categoryWrapper.value || !indicatorLine.value) return;

  const scrollLeft = categoryWrapper.value.scrollLeft;
  const maxScroll = categoryWrapper.value.scrollWidth - categoryWrapper.value.clientWidth;
  const indicatorWidth = indicatorLine.value.clientWidth;

  // 计算指示器的位置
  const indicatorLeft = (scrollLeft / maxScroll) * (indicatorWidth - activeIndicator.value.clientWidth);
  activeIndicator.value.style.left = `${indicatorLeft}px`;
  activeIndicator.value.style.width = `${(categoryWrapper.value.clientWidth / categoryWrapper.value.scrollWidth) * indicatorWidth}px`;
};

// 开始拖动
const startDrag = (e) => {
  if (!categoryWrapper.value || !indicatorLine.value) return;

  dragState.isDragging = true;
  dragState.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
  dragState.scrollLeft = categoryWrapper.value.scrollLeft;
  dragState.maxScroll = categoryWrapper.value.scrollWidth - categoryWrapper.value.clientWidth;
  dragState.indicatorWidth = indicatorLine.value.clientWidth - activeIndicator.value.clientWidth;

  window.addEventListener('mousemove', onDrag);
  window.addEventListener('mouseup', stopDrag);
  window.addEventListener('touchmove', onDrag);
  window.addEventListener('touchend', stopDrag);

  document.body.style.userSelect = 'none';
};

// 处理触摸开始
const handleTouchStart = (e) => {
  startDrag({
    clientX: e.touches[0].clientX,
    touches: e.touches
  });
};

// 拖动中
const onDrag = (e) => {
  if (!dragState.isDragging || !categoryWrapper.value) return;

  const clientX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
  const dx = clientX - dragState.startX;
  const scrollRatio = dragState.indicatorWidth / dragState.maxScroll;

  // 计算新的滚动位置
  const newScrollLeft = dragState.scrollLeft + (dx / scrollRatio);
  categoryWrapper.value.scrollLeft = Math.max(0, Math.min(newScrollLeft, dragState.maxScroll));
};

// 结束拖动
const stopDrag = () => {
  dragState.isDragging = false;

  window.removeEventListener('mousemove', onDrag);
  window.removeEventListener('mouseup', stopDrag);
  window.removeEventListener('touchmove', onDrag);
  window.removeEventListener('touchend', stopDrag);

  document.body.style.userSelect = '';
};

// 获取首页数据
const getHomeData = async () => {
  try {
    if(pageData.value) {
      const res = pageData.value.homeConfig;
      const bigImage = pageData.value.homeConfig.big_image;
      // const response = await getHomeConfig();

      const videoItem = bigImage.find(item => item.image.endsWith('.mp4'));
      if (videoItem) {
        homeConfig.homeVideo = videoItem.image;
        homeConfig.homeVideoUrl = videoItem.url.url + '-' + videoItem.classify_id.split('-')[1];
      }

      const imageItem = bigImage.find(item => !item.image.endsWith('.mp4'));
      if (imageItem) {
        homeConfig.homeImage = imageItem.image;
        homeConfig.homeImageUrl = imageItem.url.url + '-' + imageItem.classify_id.split('-')[1];
      }

      pursuitList.value = res.three_image;
      thirdSectionList.value = res.hotgoodsImage;
      hotRecommendList.value = res.hot_recommend;
    }else {
      const res = (window as any).__INITIAL_INDEX__.homeConfig;
      const bigImage = res.big_image;
      // const response = await getHomeConfig();

      const videoItem = bigImage.find(item => item.image.endsWith('.mp4'));
      if (videoItem) {
        homeConfig.homeVideo = videoItem.image;
        homeConfig.homeVideoUrl = videoItem.url.url + '-' + videoItem.classify_id.split('-')[1];
      }

      const imageItem = bigImage.find(item => !item.image.endsWith('.mp4'));
      if (imageItem) {
        homeConfig.homeImage = imageItem.image;
        homeConfig.homeImageUrl = imageItem.url.url + '-' + imageItem.classify_id.split('-')[1];
      }

      pursuitList.value = res.three_image;
      thirdSectionList.value = res.hotgoodsImage;
      hotRecommendList.value = res.hot_recommend;
    }
  } catch (error) {
    console.error('获取首页数据失败:', error);
  }
};
// 获取首页分类
const getHomeCategoryList = async () => {
  if(pageData.value) {
    categories.value = pageData.value.homeCategory;
  }else {
    categories.value = (window as any).__INITIAL_INDEX__.homeCategory;
  }
  // categories.value = (window as any).__INITIAL_INDEX__.homeCategory;
  // try {
  //   const response = await getHomeCategory();
  //   categories.value = response.result;
  // } catch (error) {
  // console.error('获取首页分类失败:', error);
  // }
}
// 组件挂载时初始化视频
onMounted(async () => {
  // 初始化SEO数据
  await initSeo('/home/data/index.json');
  getHomeData()
  getHomeCategoryList()
  if (videoPlayer.value) {
    videoPlayer.value.play().catch(error => {
      console.log('自动播放失败:', error);
      isPlaying.value = false;
    });
  }

  if (fifthVideoPlayer.value) {
    fifthVideoPlayer.value.play().catch(error => {
      console.log('第五部分视频自动播放失败:', error);
    });
  }

  // 初始化滚动条功能
  initializeScrollIndicator();

  // 初始化第五部分横向滚动
  if (fifthSectionScroll.value) {
    fifthSectionScroll.value.addEventListener('scroll', handleFifthSectionScroll);
  }
});

// 处理第五部分滚动
const handleFifthSectionScroll = () => {
  if (!fifthSectionScroll.value) return;

  const scrollLeft = fifthSectionScroll.value.scrollLeft;
  const itemWidth = fifthSectionScroll.value.scrollWidth / hotRecommendList.value.length;

  // 根据滚动位置更新当前激活的点
  currentFifthSlide.value = Math.round(scrollLeft / itemWidth);
};
// 组件卸载前停止视频播放
onBeforeUnmount(() => {
  if (videoPlayer.value) {
    videoPlayer.value.pause();
  }

  if (fifthVideoPlayer.value) {
    fifthVideoPlayer.value.pause();
  }

  // 移除事件监听器
  window.removeEventListener('mousemove', onDrag);
  window.removeEventListener('mouseup', stopDrag);
  window.removeEventListener('touchmove', onDrag);
  window.removeEventListener('touchend', stopDrag);

  if (fifthSectionScroll.value) {
    fifthSectionScroll.value.removeEventListener('scroll', handleFifthSectionScroll);
  }
});
</script>

<style lang="scss" scoped>
// 第一部分样式
.home-first-section {
  width: 100%;
  padding: 0 20px;
  margin: 0 0 40px 0;

  @media screen and (max-width: 768px) {
    padding: 0 10px;
    margin: 20px 0;
  }
}

.home-container {
  max-width: 1920px;
  margin: 0 auto;

  &:hover {
    cursor: pointer;
  }
}

// 大屏幕上的列样式
.media-col {
  @media screen and (min-width: 1920px) {
    display: flex;
    justify-content: center;
  }
}

.left-image-container,
.right-video-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  height: 0;
  padding-bottom: 112.5%; // 960:1080 = 9:10 的宽高比

  @media screen and (min-width: 992px) {
    padding-bottom: 112.5%;
  }

  // 对于超大屏幕
  @media screen and (min-width: 1920px) {
    width: 960px; // 固定宽度
    height: 1080px; // 固定高度
    padding-bottom: 0;
  }
}

.home-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  @media screen and (min-width: 1920px) {
    position: static; // 不使用绝对定位
  }
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  @media screen and (min-width: 1920px) {
    position: static; // 不使用绝对定位
  }
}

.home-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;

  @media screen and (max-width: 768px) {
    bottom: 10px;
    right: 10px;
  }

  @media screen and (min-width: 1920px) {
    bottom: 20px;
    right: 20px;
  }
}

.pause-button {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  &:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #000;
  }

  @media screen and (max-width: 768px) {
    width: 36px;
    height: 36px;
  }

  :deep(.anticon) {
    font-size: 18px;
  }
}

// 第二部分样式 - Always In the Bag
.always-in-bag-section {
  width: 100%;
  padding: 20px;
  margin: 80px 0 60px;

  @media screen and (max-width: 768px) {
    padding: 0 10px;
    margin: 60px 0 40px;
  }
}

.section-container {
  max-width: 1920px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-size: clamp(12px, 2.92vw, 56px);
  margin-bottom: 50px;
  color: #000;
  line-height: 1.161;
  letter-spacing: -.025em;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  font-optical-sizing: auto;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  font-weight: 300;

  @media screen and (max-width: 768px) {
    font-size: 30px;
    margin-bottom: 30px;
  }
}

// 分类容器样式
.category-container {
  width: 100%;
  position: relative;
}

.category-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.category-buttons {
  display: flex;
  //justify-content: center;
  flex-wrap: nowrap;
  gap: 30px;
  margin-bottom: 20px;
  min-width: max-content;
  padding: 0 40px;

  @media screen and (max-width: 768px) {
    gap: 10px;
    padding: 0 20px;
  }
}

.category-btn {
  padding: 1% 20px;
  border: 1px solid #404040;
  border-radius: 48px;
  background: transparent;
  color: #000000;
  height: auto;
  box-shadow: none;
  min-width: 120px;
  white-space: nowrap;
  flex: 1 0 19%;
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: .055em;
  line-height: 1.3125;
  vertical-align: middle;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  &:hover {
    border-color: #000;
    color: #000;
    background: transparent;
  }

  &.active {
    border-color: #000;
    color: #000;
    font-weight: normal;
    background: transparent;
  }

  &:focus {
    background: transparent;
    color: inherit;
  }

  @media screen and (max-width: 768px) {
    font-size: 14px;
    padding: 1% 15px;
    min-width: auto;
  }
}

.category-indicator {
  max-width: 800px; // 缩短滚动条长度
  margin: 5px auto 0;
  padding: 0 20px;
  cursor: pointer;

  @media screen and (max-width: 768px) {
    max-width: 80%; // 移动端也缩短滚动条
    padding: 0 10px;
    margin: 5px auto 0;
  }
}

.indicator-line {
  position: relative;
  height: 8px;
  background-color: #f0f0f0;
  margin-top: 8px;
  border-radius: 50px;
  cursor: pointer;
}

.active-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 16.66%;
  background-color: #aaa;
  border-radius: 50px;
  transition: left 0.3s ease;
  //cursor: grab;

  &:active {
    cursor: grabbing;
  }
}


// 第三部分样式 - 图片组合
.third-section {
  width: 100%;
  padding: 0 20px;
  margin: 60px 0;

  @media screen and (max-width: 768px) {
    padding: 0 10px;
    margin: 40px 0;
  }
}

.third-section-container {
  max-width: 1920px;
  margin: 0 auto;
}

.third-img-col {
  padding: 0;
}

.img-link {
  display: block;
  width: 100%;
  //height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.third-section-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 1536; // 设置指定的宽高比
  object-fit: cover;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.03);
  }
}

// 移动端特殊处理
@media screen and (max-width: 767px) {
  .third-img-col:first-child {
    margin-bottom: 10px;
  }
}

// 第四部分样式 - In Pursuit Of
.fourth-section {
  width: 100%;
  padding: 0 20px;
  margin: 80px 0 60px;

  @media screen and (max-width: 768px) {
    padding: 0 10px;
    margin: 60px 0 40px;
  }
}

.fourth-section-container {
  max-width: 1920px;
  margin: 0 auto;
  text-align: center;
}

.fourth-img-col {
  padding: 0;
  margin-bottom: 20px;

  @media screen and (max-width: 768px) {
    padding: 0 5px;
    margin-bottom: 15px;
  }
}

.fourth-product-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fourth-section-image {
  width: 100%;
  aspect-ratio: 962 / 1190;
  object-fit: cover;
  transition: transform 0.3s ease;
  background-color: #f8f8f8;

  &:hover {
    transform: scale(1.03);
  }
}

.product-title {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: clamp(12px, 1vw, 18px);
  color: #000;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  text-align: center;

  @media screen and (max-width: 768px) {
    margin-top: 10px;
    font-size: 14px;
  }
}

// 第五部分样式 - 横向滚动商品展示
.fifth-section {
  width: 100%;
  padding: 0 20px;
  margin: 80px 0 60px;

  @media screen and (max-width: 768px) {
    padding: 0;
    margin: 60px 0 40px;
  }
}

.fifth-section-container {
  max-width: 1920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.mobile-scroll-wrapper {
  display: flex;
  width: 100%;

  @media screen and (min-width: 769px) {
    justify-content: space-between;
    //flex-wrap: nowrap;
    //gap: 10px;
  }

  @media screen and (max-width: 768px) {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE/Edge
    padding: 0 20px;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.fifth-section-item {
  flex: 0 0 auto;
  width: calc(100% / 3);
  margin-bottom: 20px;
  scroll-snap-align: start;

  @media screen and (max-width: 768px) {
    width: 85%;
    margin-right: 15px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.fifth-section-image {
  width: 100%;
  aspect-ratio: 640 / 768;
  object-fit: cover;
  transition: transform 0.3s ease;
  background-color: #f8f8f8;

  &:hover {
    transform: scale(1.03);
  }
}

.fifth-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 768;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
}

.fifth-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: 100%;
  padding: 0 20px;
  z-index: 1;
}

.overlay-title {
  font-size: clamp(18px, 2vw, 32px);
  line-height: 1.2;
  font-weight: 300;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.scroll-indicator-mobile {
  display: none;

  @media screen and (max-width: 768px) {
    display: block;
    margin-top: 15px;
  }
}

.indicator-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.3s ease;

  &.active {
    background-color: #333;
  }
}

</style>
